<template>
	<div class="demo-image">
	  <div v-for="item in data.com"  class="block">
			  <el-image style="width: 200px; height: 200px" :src="$ip+`/public/shows/`+item[1].pic" @click="detail(item[1].comid)"/>
			<div>
			  <span class="demonstration" style="color: #000000;">{{item[1].comname}}</span>
			  <div style="display: flex;margin-left: 30%;" class="demonstration">
				  
				  <div style="color: #f56c6c; font-size: 1.25rem;" >
				  	<span>¥{{item[1].price}}</span>
				  </div>
				  &emsp;
				  <div >
				  	<el-button type="danger" size="small" style="background-color: #E1337F;" :icon="ShoppingCart" @click="pus(item[1].comid)">购买</el-button>
				  </div>
				  
			  </div>
		  </div>
	  </div>
	</div>
	&emsp;&emsp;
	<div style="width: 100%; ">
		<div style="margin-left: 50%;">
			<el-button type="danger" size="large" style="background-color: #E1337F;" @click="more()" >点击查看更多>></el-button>  
		</div>
		
	</div>
</template>

<script lang="ts" setup>
	import {ref, reactive,onMounted,computed} from"vue"
		import {$get,$postx,$postj,$postf} from '../../ajax/index.js'
		import { ElMessage, ElMessageBox } from 'element-plus'
		import router from"../../router/index.js"
		import store from "../../store/index.js"
		import {Search,ShoppingCart} from '@element-plus/icons-vue'
		import bottom from "../../components/bottom.vue"
		import {useRoute} from "vue-router"
		import {success,warning,message,errors} from '../../store/alert.js'
		const route = useRoute()
		
		const data=reactive({
			com:[],
			typeid:"",
			pagenum:0,
			lines:15
		})
		function pus(comid){
		console.log("购买")
		if(store.state.user.uname==""){
			errors("未登录，请登录")
			router.push("/login")
			return 
		}
		$get("/user/addCart/"+comid).then(function(resd){
			let c=[]
			c.push(resd.data.data)
			store.state.com=c
			router.push("/goorder")
		})
		
		
		
		}
		function more(){
			data.lines=data.lines+5
			$get("/public/recom/"+data.typeid+"/"+data.pagenum+"/"+data.lines).then(function(resd){
				console.log(resd.data)
				data.com=resd.data[1].data[1]
			})
		}
		function detail(comid){
			console.log("商品详情")
				console.log(comid)
			router.push({
				path: '/home/detail',
				query: {
					comid: comid
				}
			})
			
			
		}
		onMounted(()=>{
			
			let s=route.query.id
			console.log("typeid:"+s)
			data.typeid=s
			
			if(s==undefined){
				
				data.typeid=0
			}
			$get("/public/recom/"+data.typeid+"/"+data.pagenum+"/"+data.lines).then(function(resd){
				console.log(resd.data)
				data.com=resd.data[1].data[1]
			})
			
		})
		
</script>

<style>
</style>
